<template>
	<view class="upgoods-page">
		<u-navbar :autoBack="true" :title="title" :placeholder="true" bgColor="rgba(255,255,255,0)"></u-navbar>
		<view class="product">
			<view class="product-item">
				<view class="product-title">
					产品名称
				</view>
				<view class="product-input">
					<u-input inputAlign="right" placeholder="请输入产品名称" border="none" type="text" v-model="name" />
				</view>
			</view>
			<view class="product-item">
				<view class="product-title">
					产品市场价
				</view>
				<view class="product-input">
					<u-input inputAlign="right" placeholder="请输入产品市场价" border="none" type="number"
						v-model="market_price" />
				</view>
			</view>
			<view class="product-item">
				<view class="product-title">
					产品售价
				</view>
				<view class="product-input">
					<u-input inputAlign="right" placeholder="请输入产品售价" border="none" type="number" v-model="price" />
				</view>
			</view>
			<view class="product-item">
				<view class="product-title">
					产品简介
				</view>
				<view class="product-input">
					<u-input inputAlign="right" placeholder="请输入产品简介" border="none" type="text" v-model="intro" />
				</view>
			</view>
			<view class="product-image">
				<view class="product-title">
					产品图片
				</view>
				<view>
					<u-upload :fileList="fileList1" width="179rpx" height="179rpx" @afterRead="afterRead"
						@delete="deletePic" name="1" multiple :maxCount="1" uploadIconColor="#c6cafa"></u-upload>
				</view>
			</view>
			<view class="auditing">
				<u-button color="linear-gradient( 90deg, #C58AF0 0%, #6272ED 100%)" shape="circle" type="primary"
					@click="gobuy">{{btntitle}}</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileList1: [],
				name: '',
				market_price: '',
				price: '',
				intro: '',
				id: '',
				title: '',
				btntitle: ''
			}
		},
		onLoad(e) {
			this.id = e.id || ''
			if (this.id != '') {
				this.title = '编辑商品'
				this.btntitle = '提交'
				this.postdetail()
			} else {
				this.title = '发布商品'
				this.btntitle = '发布'
			}
		},
		methods: {
			postdetail() {
				let params = {
					product_id: this.id,
				}
				this.$Request({
					method: 'POST',
					url: '/api/shop_product/getDetail',
					data: params,
					ismsg: false,
				}).then(res => {
					if (res.code == 1) {
						console.log(res)
						this.name = res.data.name
						this.market_price = res.data.market_price
						this.price = res.data.price
						this.intro = res.data.intro
						if (res.data.images != '') {
							this.fileList1 = res.data.images.split(',').map(url => ({
								url: `https://m.lqvvvv.com${url}`
							}));
						}
					}
				})
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://m.lqvvvv.com/api/common/upload',
						filePath: url,
						name: 'file',
						header: {
							token: uni.getStorageSync("token") || '',
						},
						success: (res) => {
							let info = JSON.parse(res.data)
							if (info.code == 1) {
								console.log(info)
								setTimeout(() => {
									resolve(info.data.url)
								}, 1000)
							} else {
								uni.showToast({
									title: info.msg,
									icon: 'none'
								})
							}
						}
					});
				})
			},
			gobuy() {
				if (this.name == '') {
					uni.showToast({
						title: '请输入产品名称',
						icon: 'none'
					})
					return
				}
				if (this.market_price == '') {
					uni.showToast({
						title: '请输入产品市场价',
						icon: 'none'
					})
					return
				}
				if (this.price == '') {
					uni.showToast({
						title: '请输入产品售价',
						icon: 'none'
					})
					return
				}
				if (this.intro == '') {
					uni.showToast({
						title: '请输入产品简介',
						icon: 'none'
					})
					return
				}
				if (this.fileList1.length < 1) {
					uni.showToast({
						title: '请上传图片！',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					mask: true
				})
				let params = {
					name: this.name,
					images: '',
					intro: this.intro,
					market_price: this.market_price,
					price: this.price,
				}
				if (this.id != '') {
					params.product_id = this.id
				}
				params.images = this.fileList1.map(item => item.url.replace('https://m.lqvvvv.com', '')).join(',');
				this.$Request({
					method: 'POST',
					url: '/api/shop_product/release',
					data: params,
					ismsg: true,
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1500)
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.upgoods-page {
		min-height: 100vh;
		background-image: url('https://m.lqvvvv.com/assets/static/index/nav-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 800rpx;
		padding: 30rpx;
		background-color: #F7F8FC;

		.product {
			width: 100%;
			padding: 0 30rpx 30rpx 30rpx;
			background-color: #ffffff;
			border-radius: 20rpx;

			.auditing {
				width: 100%;
				margin-top: 30rpx;
			}

			.product-image {
				padding: 30rpx 0;

				.product-title {
					font-weight: bold;
					font-size: 28rpx;
					color: #2E314A;
					margin-bottom: 30rpx;
				}
			}

			.product-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #EFEFEF;
				padding: 30rpx 0;

				.product-title {
					font-weight: bold;
					font-size: 28rpx;
					color: #2E314A;
				}

				.product-input {}

				.switch {
					display: flex;
					align-items: center;
				}
			}
		}
	}
</style>